<!DOCTYPE html>
<html lang="zh-Hans" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="frontInclude :: frontHeader"/>
<link rel="stylesheet" th:href="@{/css/team-styles.css?v=v7}" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" th:href="@{/css/style2.css?v=v7}" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" th:href="@{/css/additional-styles.css?v=v7}" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" th:href="@{/css/auto-scroll.css?v=v7}" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" th:href="@{/css/contact-styles.css?v=v7}" type="text/css" media="all" charset="utf-8">
<!-- 字体图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<body class="wel-body">
<header class="headerbox pcbox" th:replace="frontInclude :: header_menu"></header>
<div class="mbox" th:replace="frontInclude :: header_menu_mobile"></div>
<div class="con-banner">
    <div class="images pcbox"
         th:style="'background:url('+@{/img/banner3.jpg}+') no-repeat center;background-size: cover;'">
    </div>
    <img img class="mbox h500" th:src="@{/img/banner3.jpg}" alt="走进黑蝎">
    <div class="words">
        <div class="text w1280">
            <div class="tit-en tit-48 secwen">CONTACT</div>
            <div class="tit-cn tit-36 secwen add1">联系我们</div>
            <div class="line secwen add2"></div>
        </div>
    </div>
</div>


<!--<div class="attention-center con-swiper f-cb">-->
<!--    <div class="j-tabloid w1280 ">-->
<!--        <div class="article w1">-->
<!--            <div class="article-box">-->
<!--                <article class="article-main">-->
<!--                    <form th:action="@{/front/contact/submit}" method="post" id="saypl" data-toggle="validator"-->
<!--                          role="form">-->
<!--                        <ul>-->
<!--                            <li class="form-group">-->
<!--                                <label class="control-label" for="userName">姓名</label>-->
<!--                                <input type="text" id="userName" name="userName" class="form-control text" value=""-->
<!--                                       placeholder="姓名（必填）" size="28"-->
<!--                                       tabindex="1" required>-->
<!--                            </li>-->
<!--                            <li class="form-group">-->
<!--                                <label class="control-label" for="mobile">电话</label>-->
<!--                                <input type="text" id="mobile" name="mobile" class="form-control text" value=""-->
<!--                                       placeholder="电话（必填）" size="28"-->
<!--                                       tabindex="1" required>-->
<!--                            </li>-->
<!--                            <li style="position: relative;" class="form-group">-->
<!--                                <label class="control-label" for="wechat">微信号</label>-->
<!--                                <input type="text" id="wechat" name="wechat" class="form-control text" value=""-->
<!--                                       placeholder="微信号" size="28"-->
<!--                                       tabindex="2">-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                        <p class="form-group npt">-->
<!--                            <label class="control-label" for="saytext">留言</label>-->
<!--                            <textarea name="message" id="saytext" class="form-control text" cols="50" rows="4"-->
<!--                                      tabindex="5" placeholder="留言" required></textarea>-->
<!--                        </p>-->
<!--                        <p class="form-group" style="margin-top: 5px">-->
<!--                            <input type="submit" tabindex="6" value="提交" class="button">-->
<!--                        </p>-->
<!--                    </form>-->
<!--                </article>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->


<!-- 联系信息 -->
<section class="contact-info-section">
    <div class="container">
        <div class="contact-info-wrapper">
            <div class="contact-info-card">
                <div class="info-icon">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <h3>公司地址</h3>
                <p th:text="${company.address}"></p>
            </div>

            <div class="contact-info-card">
                <div class="info-icon">
                    <i class="fas fa-phone-alt"></i>
                </div>
                <h3>联系电话</h3>
                <p>总机: 0871-67274101</p>
                <p th:text="${'手机: '+company.phoneNumber}">手机: 400-123-4567</p>
            </div>

            <div class="contact-info-card">
                <div class="info-icon">
                    <i class="fas fa-envelope"></i>
                </div>
                <h3>电子邮箱</h3>
                <p th:text="${'业务咨询: '+company.email}">业务咨询: contact@example.com</p>
                <p th:text="${'客户服务: '+company.email}">客户服务: service@example.com</p>
            </div>

            <div class="contact-info-card">
                <div class="info-icon">
                    <i class="fas fa-clock"></i>
                </div>
                <h3>工作时间</h3>
                <p>周一至周五: 9:00 - 18:00</p>
                <p>周六、周日: 休息</p>
            </div>
        </div>
    </div>
</section>

<!--&lt;!&ndash; 联系表单和地图 &ndash;&gt;-->
<!--<section class="contact-form-section">-->
<!--    <div class="container">-->
<!--        <div class="contact-form-wrapper">-->
<!--            <div class="contact-form-container">-->
<!--                <div class="section-title">-->
<!--                    <h2>在线留言</h2>-->
<!--                    <p>填写以下信息，我们将尽快与您联系</p>-->
<!--                </div>-->
<!--                <form th:action="@{/front/contact/submit}" method="post" id="saypl" data-toggle="validator" class="contact-form">-->
<!--                    <div class="form-group">-->
<!--                        <label for="userName">您的姓名</label>-->
<!--                        <input type="text" id="userName" name="userName" placeholder="请输入您的姓名" required>-->
<!--                    </div>-->
<!--                    <div class="form-group">-->
<!--                        <label for="mobile">联系电话</label>-->
<!--                        <input type="tel" id="mobile" name="mobile" placeholder="请输入您的联系电话" required>-->
<!--                    </div>-->
<!--                    <div class="form-group">-->
<!--                        <label for="wechat">微信号</label>-->
<!--                        <input type="text" id="wechat" name="wechat" placeholder="请输入您的微信号">-->
<!--                    </div>-->
<!--                    <div class="form-group">-->
<!--                        <label for="saytext">留言内容</label>-->
<!--                        <textarea iname="message" id="saytext" rows="5" placeholder="请输入您的留言内容" required></textarea>-->
<!--                    </div>-->
<!--                    <div class="form-group">-->
<!--                        <button type="submit" class="submit-btn">提交留言</button>-->
<!--                    </div>-->
<!--                </form>-->
<!--            </div>-->

<!--            <div class="contact-map-container">-->
<!--                <div class="map-wrapper">-->
<!--                    <div class="img-placeholder" style="height: 400px;">-->
<!--                        <img style="width: 100%" th:src="@{/img/gsjj.png}">-->
<!--                        <div class="map-overlay">-->
<!--                            <h3>公司位置</h3>-->
<!--                            <p><i class="fas fa-map-marker-alt"></i> <p th:text="${company.address}"></p></p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="company-qrcode">-->
<!--                    <div class="qrcode-item">-->
<!--                        <div class="qrcode-img">-->
<!--                            <div class="img-placeholder" style="width: 120px; height: 120px;">-->
<!--                                <img th:src="${company.wechatQr}"  alt="客服微信">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <p>微信公众号</p>-->
<!--                    </div>-->
<!--                    <div class="qrcode-item">-->
<!--                        <div class="qrcode-img">-->
<!--                            <div class="img-placeholder" style="width: 120px; height: 120px;">-->
<!--                                <img th:src="${company.wechatQr}" alt="客服微信">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <p>客服微信</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->

<!-- 分公司信息 -->
<section class="branch-offices-section">
    <div class="container">
        <div class="section-title">
            <h2>分子公司信息</h2>
        </div>
        <div class="branch-offices-wrapper">
            <div class="branch-office-card">
                <h3> 云南黑蝎营销策划有限公司</h3>
                <p><i class="fas fa-map-marker-alt"></i> 昆明市官渡区宝海路宝海公园121号玻璃房1层</p>
                <p><i class="fas fa-phone-alt"></i> 13108661155</p>
                <p><i class="fas fa-envelope"></i> 292323423423@qq.com</p>
            </div>

            <div class="branch-office-card">
                <h3> 风知道（云南）数据技术有限公司</h3>
                <p><i class="fas fa-map-marker-alt"></i> 云南省昆明市西山区盘江西路与前旺路交叉口前景路33号蓝光可可蜜城03号楼1单元1-2层16号商铺</p>
                <p><i class="fas fa-phone-alt"></i> 13529474579</p>
                <p><i class="fas fa-envelope"></i> 292323423423@qq.com</p>
            </div>

            <div class="branch-office-card">
                <h3>云南滇约新能源研究院</h3>
                <p><i class="fas fa-map-marker-alt"></i> 云南省昆明市五华区红云街道办事处幸福家园社区小康大道德润朗悦湾13栋 1006号</p>
                <p><i class="fas fa-phone-alt"></i> 13529474579</p>
                <p><i class="fas fa-envelope"></i> 1301102485@qq.com</p>
            </div>

<!--            <div class="branch-office-card">-->
<!--                <h3>成都分公司</h3>-->
<!--                <p><i class="fas fa-map-marker-alt"></i> 成都市高新区天府大道</p>-->
<!--                <p><i class="fas fa-phone-alt"></i> 028-87654321</p>-->
<!--                <p><i class="fas fa-envelope"></i> chengdu@example.com</p>-->
<!--            </div>-->
        </div>
    </div>
</section>

<!--&lt;!&ndash; 常见问题 &ndash;&gt;-->
<!--<section class="faq-section">-->
<!--    <div class="container">-->
<!--        <div class="section-title">-->
<!--            <h2>常见问题</h2>-->
<!--        </div>-->
<!--        <div class="faq-wrapper">-->
<!--            <div class="faq-item">-->
<!--                <div class="faq-question">-->
<!--                    <h3>如何开始与贵公司合作?</h3>-->
<!--                    <span class="toggle-icon"><i class="fas fa-plus"></i></span>-->
<!--                </div>-->
<!--                <div class="faq-answer">-->
<!--                    <p>您可以通过本页面的联系表单、电话或邮件与我们取得联系。我们的客户经理会在24小时内回复您，并安排初步沟通，了解您的需求后提供相应的解决方案。</p>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="faq-item">-->
<!--                <div class="faq-question">-->
<!--                    <h3>贵公司的服务收费标准是怎样的?</h3>-->
<!--                    <span class="toggle-icon"><i class="fas fa-plus"></i></span>-->
<!--                </div>-->
<!--                <div class="faq-answer">-->
<!--                    <p>我们的收费标准根据项目类型、规模和复杂度有所不同。我们会根据您的具体需求提供详细的报价方案。我们承诺提供透明的价格体系，没有隐藏费用。</p>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="faq-item">-->
<!--                <div class="faq-question">-->
<!--                    <h3>项目周期一般是多久?</h3>-->
<!--                    <span class="toggle-icon"><i class="fas fa-plus"></i></span>-->
<!--                </div>-->
<!--                <div class="faq-answer">-->
<!--                    <p>项目周期因类型而异。一般来说，数据分析类项目约需2-4周，营销策划类项目约需4-8周，大型综合项目可能需要3-6个月。我们会在项目启动前与您确认具体时间表。</p>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="faq-item">-->
<!--                <div class="faq-question">-->
<!--                    <h3>是否提供售后服务?</h3>-->
<!--                    <span class="toggle-icon"><i class="fas fa-plus"></i></span>-->
<!--                </div>-->
<!--                <div class="faq-answer">-->
<!--                    <p>是的，我们为所有项目提供售后服务。根据项目类型，我们提供3-12个月的免费维护期，期间可进行必要的调整和优化。维护期后，我们也提供付费的持续支持服务。</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->

<script>
    // FAQ 切换
    document.addEventListener('DOMContentLoaded', function() {
        const faqQuestions = document.querySelectorAll('.faq-question');

        faqQuestions.forEach(question => {
            question.addEventListener('click', function() {
                const answer = this.nextElementSibling;
                const icon = this.querySelector('.toggle-icon i');

                // 切换当前FAQ项
                if (answer.style.maxHeight) {
                    answer.style.maxHeight = null;
                    icon.classList.remove('fa-minus');
                    icon.classList.add('fa-plus');
                } else {
                    answer.style.maxHeight = answer.scrollHeight + 'px';
                    icon.classList.remove('fa-plus');
                    icon.classList.add('fa-minus');
                }
            });
        });

        // 表单提交
        const contactForm = document.getElementById('saypl');
        if (contactForm) {
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();

                // 这里可以添加表单验证和提交逻辑

                // 显示提交成功消息
                alert('感谢您的留言！我们会尽快与您联系。');
                this.reset();
            });
        }
    });
</script>

<!--<script>-->
<!--    $('.header').removeClass('opaque').addClass('noOpaque');-->
<!--    $('#form').validator().on('submit', function (e) {-->
<!--        if (e.isDefaultPrevented()) {-->
<!--            // handle the invalid form...-->
<!--        } else {-->
<!--            // everything looks good!-->
<!--        }-->
<!--    })-->

<!--</script>-->

<div th:replace="frontInclude :: footer"></div>
<script th:src="@{/js/main.js?v=v7}" type="text/javascript" charset="utf-8"></script>
</body>
</html>